<!-- 确认订单 -->

<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar left-icon="left" left-text="" title="订单确认" @clickLeft="back" />
	<view class="main">
		<!-- 地址 -->
		<view class="main-address" @click="toAddress(1)" v-if="state.address">
			<view class="left">
				<view class="name">
					<text style="margin-right: 30rpx;">{{state.address.name}}</text>
					<text>{{state.address.mobile}}</text>
				</view>
				<view class="address">{{state.address.district}}</view>
				<!-- <view class="detail">某某某某小区 1号楼1单元101</view> 详细地址 -->
			</view>
			<view class="right">></view>
		</view>
		<!-- 商品 -->
		<view class="main-shop">
			<!-- 购物车 -->
			<view v-if="type !== 1">
				<view class="goods" v-for="(item,index) in store.goods" :key="index">
					<view class="left">
						<image :src="item.cover_img" mode=""></image>
					</view>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="size">{{item.size.name}}</view>
						<view class="detail">
							<view class="num">
								<text>¥ {{item.size.price}}</text> * {{item.total}}
							</view>
							<view class="num">
								合计：<text>¥ {{item.size.price * item.total}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 直接购买 -->
			<view v-else>
				<view class="goods" v-for="(item,index) in state.shopData" :key="index">
					<view class="left">
						<image :src="item.cover_img" mode=""></image>
					</view>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="detail">
							<view class="num">
								<text>¥ {{item.size.price}}</text> * {{item.total}}
							</view>
							<view class="num">
								合计：<text>¥ {{item.size.price * item.total}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="main-tip">
			<view class="item">
				<text>运费：</text>
				<text>¥ 0.00</text>
			</view>
			<view class="item">
				<text>优惠券选择</text>
				<text>未选/暂无优惠券/已选</text>
			</view>
		</view>
		<!-- 备注 -->
		<view class="main-remark">
			<view class="price">
				总计：<text>¥ {{totalPrice}}</text>
			</view>
			<view class="input">
				留言： <input type="text" value="" placeholder="（选填）针对本次交易说明" />
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="main-pay">
			<view class="title">支付方式</view>
			<radio-group @change="radioChange" class="value checked" style="font-size: 13px;">
				<view class="radio">
					<label>
						<radio value="1" :checked="Paymcent == 1" disabled="false"/>
						<text>账户余额，当前余额0元</text>
					</label>
					<label>
						<radio value="2" :checked="Paymcent == 2" />
						<text>微信支付</text>
					</label>
				</view>
			</radio-group>
		</view>
		
		<!-- 填写 -->
		<view class="main-add" v-if="!state.address">
			<view class="item" @click="toAddress(0)">填写收货地址</view>
			<view class="item">一键授权微信收地址</view>
		</view>
		
		<!-- 底部 -->
		<view class="main-bottom">
			<view class="item">
				总计：<text style="color: #D20015">¥ {{totalPrice}}</text>
			</view>
			<view class="item black" @click="Submit()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow, onLoad } from "@dcloudio/uni-app"
import { ref, reactive } from "vue";
import { useCartStore } from '@/store/cart.js';
import { addressList } from '@/request/api/address.js';
import { createOrder, OrderPay } from '@/request/api/shop.js';

const store = useCartStore();

const type = ref(null);  // 0 购物车进入   1 直接结算
const Paymcent = ref(2);  // 支付方式 // 1 余额  2 微信 
const totalNumber = ref(0);  // 总应付数量
const totalPrice = ref(0);  // 购物车总金额

const state = reactive({
	data: '',
	address: [],
	shopData: []
})

onLoad((e) => {
	if (e.data) {
		state.shopData[0] = JSON.parse(e.data);
		type.value = Number(e.type);
	}
	
	// 计算总价格跟数量
	if (type.value == 1) {
		totalPrice.value = state.shopData[0].total * state.shopData[0].size.price;
	} else {
		// 循环vuex计算
		for (let i = 0; i < store.goods.length; i++) {
			totalPrice.value += Number(store.goods[i].size.price) * Number(store.goods[i].total);
			totalNumber.value +=  Number(store.goods[i].total);
		}
	}
})

onShow(async() => {
	// 获取地址
	const resultData = await addressList();
	state.address = resultData.data[0];
})

// 选择支付方式
const radioChange = (e) => {
	Paymcent.value = e.detail.value;
}

// 添加收货地址
const toAddress = (index) => {
	uni.navigateTo({
		url: `/pages/my/addressmanage?data=${JSON.stringify(state.address)}&type=${index}`
	})
}

// 提交订单
const Submit = async() => {
	if(type.value == 1) {
		var goods_info = [
			{
				goods_id: state.shopData[0].id,
				buy_num: state.shopData[0].total,
				sku: state.shopData[0].size.name
			}
		];
	} else {
		var goods_info = store.goods.map(item => ({
			goods_id: item.id,
			buy_num: item.total,
			sku: item.size.name
		}));
	}
	let params = {
		goods_info: JSON.stringify(goods_info),
		price: totalPrice.value,
		member_name: state.address.name,
		phone: state.address.mobile,
		address_id: state.address.id
	};
	
	// 创建订单
	const data = await createOrder(params);
	if (data.code == 200) {
		let payParams = { order_sn: data.data.order_sn }
		
		const payData = await OrderPay(payParams);
		uni.requestPayment({
			provider: 'wxpay',    //支付类型-固定值
			timeStamp: payData.data.timeStamp, // 时间戳（单位：秒）
			nonceStr: payData.data.nonceStr, // 随机字符串
			package: payData.data.package, // 固定值
			signType: payData.data.signType, //固定值
			paySign: payData.data.paySign, //签名
			success: function (res) {
				console.log('success:' + JSON.stringify(res));
				console.log("支付成功");
				uni.showToast({
					title: '支付成功',
					icon: 'none',
					duration: 1000,
				});
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err));
				uni.showToast({
					title: '支付失败',
					icon: 'none',
					duration: 1000,
				});
			}
		});
	}
	
	console.log(params)
}

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.main {
		.main-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 40rpx;
			border-bottom: 8rpx solid #DDD8D3;
			padding: 20rpx 36rpx;
			box-sizing: border-box;
			.left {
				margin-left: 36rpx;
			}
		}
		.main-shop {
			padding: 0rpx 24rpx;
			box-sizing: border-box;
			.goods {
				display: flex;
				align-items: center;
				padding: 36rpx 36rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #DDD8D3;
				.left {
					image {
						width: 144rpx;
						height: 144rpx;
						border-radius: 10rpx;
						vertical-align: middle;
					}
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 144rpx;
					padding-left: 36rpx;
					.detail {
						display: flex;
						align-items: center;
						justify-content: space-between;
						text {
							color: #D20015;
						}
					}
				}
			}
		}
		
		.main-tip {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 40rpx;
			border-bottom: 2rpx solid #DDD8D3;
			.item {
				padding: 0rpx 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
			}
			.item:last-child {
				margin-bottom: 0rpx;
			}
		}
		
		.main-remark {
			padding: 20rpx 36rpx;
			box-sizing: border-box;
			border-bottom: 8rpx solid #DDD8D3;
			.price {
				padding: 0rpx 12rpx;
				text-align: right;
				font-size: 26rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #1C1919;
				line-height: 40rpx;
				text {
					color: #D20015;
				}
			}
			.input {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				input {
					flex: 1;
					border-radius: 14rpx;
					opacity: 0.18;
					border: 2rpx solid #979797;
					height: 62rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
				}
			}
		}
		
		.main-pay {
			padding: 38rpx 56rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1C1919;
			line-height: 40rpx;
			.title {
				margin-bottom: 34rpx;
			}
			.radio {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				::v-deep {
					label {
						margin-bottom: 20rpx;
					}
				}
			}
		}
		
		.main-bottom {
			width: 100%;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 34rpx;
			font-weight: 600;
			position: fixed;
			bottom: 0rpx;
			background-color: #fff;
			z-index: 99;
			.item {
				width: 50%;
				text-align: center;
				line-height: 158rpx;
			}
			.black {
				background-color: #1C1919;
				color: #fff;
			}
		}
		
		.main-add {
			color: #1C1919;
			display: flex;
			justify-content: space-around;
			padding: 0rpx 30rpx;
			.item {
				display: inline-block;
				border: 2rpx solid #DDD8D3;
				color: #1C1919;
				text-align: center;
				padding: 0rpx 38rpx;
				line-height: 52rpx;
				height: 52rpx;
				border-radius: 30rpx;
			}
		}
	}
</style>